---
title: Documentation
---
{{#extend "layout"}}
  {{#content "body"}}
    <div class="copy documentation">
      <section>
        <h1>什么是铁路图</h1>

        <p>正则表达式生成的图像通常被称为"铁路图".非常简单直观地阐述了嵌套循环和多选结构等复杂问题. 阅读铁路图的最简单方式是从最左边位置开始并沿着右边的线直到最右边位置. 如果遇到分支,然后可以选择多种分支结构之一(这些路径可以循环回到先前位置).为了使字符串成功匹配图中的正则表达式,你必须能够在从左到右移动并完成整个图直到最后过程.

        <figure class="shift-right" data-expr="Lions(?: and|,) tigers,? and bears\. Oh my!"></figure>

        <p>例如: 此表达式将匹配“狮子，老虎和熊。噢，我的天！”或者在语法上更正确的是“狮子，老虎和熊。噢，我的天！”（带或不带牛津逗号）。该图首先匹配字符串“ Lions”。如果没有输入，您将无法继续。然后可以在逗号或字符串“和”之间选择。无论您做出什么选择，输入字符串都必须包含“ tigers”，后跟一个可选的逗号（您的路径可以通过逗号或在逗号周围）。最后，字符串必须以“和承担。哦，我的天！”结尾。</p>

        <section>
          <h2>基础组成</h2>

          <p>这些图中最简单的部分是与某些特定文本匹配的部分，没有选项。它们是：文字，转义序列和“任何字符”。</p>

          <div class="section">
            <h3>字面量 literal</h3>

            <figure class="shift-left" data-expr="literal"></figure>

            <p>文字匹配精确的文本字符串。它们显示在一个浅蓝色框中，并用引号引起来（以便于查看任何前导或尾随空格）。</p>
          </div>

          <div class="section">
            <h3>转义字符 \</h3>

            <figure class="shift-left" data-expr="\w\s\d"></figure>

            <p>转义序列显示在绿色框中，并包含将与之匹配的字符类型的描述。</p>
          </div>

          <div class="section">
            <h3>任意字符 .</h3>

            <figure class="shift-left" data-expr="."></figure>

            <p>“任何字符”类似于转义序列。它与任何单个字符匹配。</p>
          </div>
        </section>

        <section>
          <h2>字符集合 []</h2>

          <figure class="shift-left" data-expr="[#a-z\n][^$0-9\b]"></figure>

          <p>字符集将匹配或不匹配单个字符的集合。它们显示为包含文字和转义序列的框。顶部的标签指示该字符集将与包含的项目“之一”或包含的项目“无”相匹配。</p>
        </section>

        <section>
          <h2>子表达式 ()</h2>

          <figure class="shift-left" data-expr="(?:non-capture group)(capture group)(?=followed by content)"></figure>

          <p>子表达式由表达式中各项周围的虚线轮廓指示。捕获的子表达式带有将在其下捕获的组号标记。正向和负向提前标记为此类。</p>
        </section>

        <section>
          <h2>选择项 |</h2>

          <figure class="shift-left" data-expr="one\s|two\W|three\t|four\n"></figure>

          <p>交替提供正则表达式的选择。表达式展开成多种选择的路径表明了这一点。</p>
        </section>

        <section>
          <h2>量词</h2>

          <p>量词指示表达式的一部分是否应该重复或可选。通过图分支的路径（和可能循环返回本身），它们与“交替”类似地显示。除非路径上的箭头指示，否则首选路径是继续直行。</p>

          <div class="section">
            <h3>零个或多个 *</h3>

            <figure class="shift-left" data-expr="(?:greedy)*">
              <figcaption>贪婪匹配</figcaption>
            </figure>

            <figure class="shift-left" data-expr="(?:non-greedy)*?">
              <figcaption>非贪婪匹配</figcaption>
            </figure>

            <p>零或更多量词匹配模式的任意数量的重复。</p>
          </div>

          <div class="section">
            <h3>必选的 +</h3>

            <figure class="shift-left" data-expr="(?:greedy)+">
              <figcaption>贪婪匹配</figcaption>
            </figure>

            <figure class="shift-left" data-expr="(?:non-greedy)+?">
              <figcaption>非贪婪匹配</figcaption>
            </figure>

            <p>所需的量词与模式的一个或多个重复匹配。请注意，它没有像零个或多个量词一样允许跳过模式的路径。</p>
          </div>

          <div class="section">
            <h3>可选的 ?</h3>

            <figure class="shift-left" data-expr="(?:greedy)?">
              <figcaption>贪婪匹配</figcaption>
            </figure>

            <figure class="shift-left" data-expr="(?:non-greedy)??">
              <figcaption>非贪婪匹配</figcaption>
            </figure>

            <p>可选的量词最多匹配一次模式。请注意，它没有允许模式像零或更多或所需的量词一样循环返回自身的路径。</p>
          </div>

          <div class="section">
            <h3>范围值 {n,m}</h3>

            <figure class="shift-left" data-expr="(?:greedy){5,10}">
              <figcaption>贪婪匹配</figcaption>
            </figure>

            <figure class="shift-left" data-expr="(?:non-greedy){5,10}?">
              <figcaption>非贪婪匹配</figcaption>
            </figure>

            <p>远程量词指定可重复图案的次数。此处提供的两个示例的范围均为“ {5,10}”，循环分支的标签指示可以遵循该分支的次数。该值比表达式中指定的值小1，因为在重复该模式之前，该模式必须匹配一次。因此，对于这些示例，模式将被匹配一次，然后循环将被跟踪4到9次，总共有5到10个模式匹配。</p>
          </div>
        </section>
      </section>
    </div>
  {{/content}}

  {{#content "footer" mode="append"}}
    <script src="./js/main.js" async defer></script>
  {{/content}}
{{/extend}}
